<template>
  <el-carousel class="carousel-index">
    <el-carousel-item v-for="(item,index) in data" :key="index">
      <img @click="toBanner(item.url)" :src="item.image">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {}
  },
  methods: {
    toBanner(url) {
      if (url.indexOf('//') == -1) {
        window.open('//' + url, '_blank')
      } else {
        window.open(url, '_blank')
      }
    }
  },
  components: {}
}
</script>

<style  lang='scss'>
.carousel-index {
  width: 100%;
  height: 550px;
  .el-carousel__container {
    height: 100%;
  }
  img {
    text-align: center;
    margin: 0 auto;
    width: 1920px;
    margin: 0 calc(50% - 960px);
  }
}
</style>
